<template>
    <div style="padding:10px;background-color: white;">
        <Search @submit="handleSearch" @reset="handleReset">
            <AFormItem label="页面ID" >
                <AInput v-model:value="state.formData.id"></AInput>
            </AFormItem>
            <AFormItem label="页面名称" >
                <AInput v-model:value="state.formData.title"></AInput>
            </AFormItem>
        </Search>
    </div>
    <div style="padding:10px;margin-top:10px;background-color: white;">
        <div style="margin-bottom: 10px;">
            <AButton type="primary"  @click="addPage">新增</AButton>
        </div>
        <ATable :data-source="state.dataSource" :columns="columns" bordered :pagination="false"></ATable>
        <Pagination :pagination="state.pagination" @change="pageChange"></Pagination>
    </div>
    <FormModal v-if="state.modalVisible" @ok="handleOk" @cancel="handleCancel" :currentData="state.currentData" ></FormModal>
</template>
<script lang="ts" setup>
import { reactive,onMounted,h} from "vue";
import FormModal from "./components/FormModal/index.vue"
import { PageResult, ResponseVo,ActivityPageTypes, CommontTypes } from "@/type";
import { ActivityPageService } from "@/service";
import Search from '@/components/Search/Search.vue';
import Pagination from "@/components/Pagination/index.vue";
import { Button, Popconfirm } from "ant-design-vue";
    const state = reactive<{
        formData:{
            id:string,
            title: string
        },
        pagination:CommontTypes.IPagination,
        modalVisible: boolean,
        dataSource:ActivityPageTypes.ActityItemItem[];
        currentData:any
    }>({
        formData:{
            id:"",
            title:""
        },
        pagination:{
        pageNum:1,
        pageSize:10,
        total:0
    },
        modalVisible: false,
        dataSource:[],
        currentData:{}
    })

    onMounted(()=>{
    handleSearch();
})


const columns = [
    {title:"页面ID",dataIndex:"id"},
    {title:"页面标题",dataIndex:"title"},
    {title:"页面描述",dataIndex:"description"},
    
    {title:"小程序页面链接",dataIndex:"link",customRender:({record}:{record:ActivityPageTypes.ActityItemItem})=>{
        return h('div',{},`/subOther/activity/index?id=${record.id}`)
    }},
    {title:"创建人",customRender:({record}:{record:ActivityPageTypes.ActityItemItem})=>{
        return h('div',{},record.creator?`${record.creator}/${record.createTime}`:'-')
    }},
    {title:"修改人",customRender:({record}:{record:ActivityPageTypes.ActityItemItem})=>{
        return h('div',{},record.updator?`${record.updator}/${record.updateTime}`:'-')
    }},
    {title:"操作",customRender:({record}:{record:ActivityPageTypes.ActityItemItem})=>{
        return h('div',{},[
         h(Button,{type:"text",onClick:()=>editPage(record)},"编辑"),
         h(Popconfirm,{title:"确认执行此操作",onConfirm:()=>deletePage(record)},[ h(Button,{type:"text"},"删除")])
        ])
    }}
]

const handleSearch = async()=>{
    const res:ResponseVo<PageResult<ActivityPageTypes.ActityItemItem>>= await ActivityPageService.pageActivityPage({...state.formData,...state.pagination});
    if(res.code===0){
        state.dataSource = res.data.list;
        state.pagination.total = res.data.total;
        console.log("res.data.list--->",res.data.list)
    }
}

const pageChange = (page:number,size:number)=>{
    state.pagination.pageNum = page;
    state.pagination.pageSize = size;
    handleSearch();
}

const handleReset = ()=>{
    state.formData = {
        id:"",
            title:""
    };
    state.pagination.pageNum=1;
    state.pagination.total=0;
    handleSearch();
}

const addPage = ()=>{
    state.currentData = {};
    state.modalVisible = true;
}

const editPage = (record:ActivityPageTypes.ActityItemItem)=>{
    state.currentData = {...record};
    state.modalVisible = true;
}

const deletePage = async(record:ActivityPageTypes.ActityItemItem)=>{
    let res:ResponseVo<ActivityPageTypes.ActityItemItem> =await ActivityPageService.deleteActivityPage(record.id);
        console.log(res)
    if(res.code===0){
        state.pagination.pageNum=1;
        handleSearch();
    }
}


    const handleOk = ()=>{
        state.modalVisible = false;
        state.pagination.pageNum=1;
        handleSearch();
    } 
    
    const handleCancel=()=>{
        state.modalVisible = false;
    }
</script>